<template>
  <div class="edit-other-info">
    <div class="info-modal" v-for="(item, idx) in mainInfo.list" :key="idx" :style="{ zIndex: 100 - idx }">
      <div class="left-modify-area">
        <div class="top-description">
          <div class="desc-item"
            v-for="(itemName, index) in item.order.split(',').filter(o => item.visibleList.includes(o))"
            :key="index">
            <template v-if="itemName === 'time'">
              <div class="desc-item__name">时间</div>
              <div class="desc-item__value" style="position: relative; top: 1px;">
                <a-range-picker
                  :placeholder="['开始时间', '结束时间']"
                  format="YYYY/MM"
                  value-format="YYYY/MM"
                  v-model="item.time"
                />
                <a-checkbox v-model="item.rightNow" style="position: relative; top: -1px;">至今</a-checkbox>
              </div>
            </template>
            <template v-if="itemName === 'subject'">
              <div class="desc-item__name">主体</div>
              <div class="desc-item__value">
                <a-input v-model="item.subject" placeholder="学校/公司/其他"></a-input>
              </div>
            </template>
            <template v-if="itemName === 'other'">
              <div class="desc-item__name">其他</div>
              <div class="desc-item__value">
                <a-input v-model="item.other" placeholder="专业/职位/其他"></a-input>
              </div>
            </template>
          </div>
        </div>
        <Editor v-model="item.editorHtml" v-if="!item.hideEditor" />
      </div>
      <div class="right-setting-area">
        <a-popover title="显示/隐藏/调整顺序" placement="bottom">
          <template slot="content">
            <div style="padding: 8px 16px;">
              <div style="margin-bottom: 8px;">
                <a-checkbox-group v-model="item.visibleList">
                  <a-checkbox
                    v-for="item in plainOptions"
                    :key="item.key" :value="item.key">{{ item.label }}</a-checkbox>
                </a-checkbox-group>
              </div>
              <div style="padding-top: 8px; border-top: 1px dashed #f1f1f1;">
                <a-radio-group v-model="item.order">
                  <a-radio
                    v-for="item in orderOptions"
                    :value="item.key"
                    :key="item.key"
                    style="display: flex; align-items: center; margin-bottom: 6px;">{{ item.label }}</a-radio>
                </a-radio-group>
              </div>
            </div>
          </template>
          <a-icon type="setting" />
        </a-popover>
        <a-icon type="arrow-up"
          @click="handleMoveResumeItem(idx, 'up')"
          v-if="idx > 0" />
        <a-icon type="arrow-down"
          @click="handleMoveResumeItem(idx, 'down')"
          v-if="idx !== mainInfo.list.length - 1" />
        <a-icon type="plus"
          @click="handleInsertResumeItem(item.hideEditor)"
          v-if="idx === mainInfo.list.length - 1" />
        <a-icon type="delete"
          @click="handleDeleteResumeItem(idx)"
          v-if="mainInfo.list.length > 1" />
      </div>
    </div>
  </div>
</template>

<script>
import Editor from './Editor'
export default {
  name: 'EditOtherInfo',
  components: { Editor },
  props: {
    modelValue: {
      type: Object,
      default: () => {
        return {
          list: []
        }
      }
    }
  },
  model: {
    prop: 'modelValue',
    event: 'input'
  },
  data () {
    return {
      plainOptions: [
        { key: 'time', label: '时间' },
        { key: 'subject', label: '主体' },
        { key: 'other', label: '其他' }
      ],
      orderOptions: [
        { key: 'time,subject,other', label: '时间 -> 主体 -> 其它' },
        { key: 'time,other,subject', label: '时间 -> 其它 -> 主体' },
        { key: 'other,subject,time', label: '其它 -> 主体 -> 时间' },
        { key: 'subject,other,time', label: '主体 -> 其它 -> 时间' }
      ],
      mainInfo: {}
    }
  },
  created () {},

  methods: {

    handleDeleteResumeItem (idx) {
      this.mainInfo.list.splice(idx, 1)
    },

    handleInsertResumeItem () {
      this.mainInfo.list.push({
        time: [],
        rightNow: false,
        subject: '',
        other: '',
        editorHtml: '',
        visibleList: ['time', 'subject', 'other'],
        order: 'time,subject,other'
      })
    },

    handleMoveResumeItem (idx, type) {
      const target = this.mainInfo.list.splice(idx, 1)[0]
      this.mainInfo.list.splice(type === 'down' ? idx + 1 : idx - 1, 0, target)
    }
  },

  watch: {
    modelValue: {
      handler (newVal) {
        this.mainInfo = newVal
      },
      deep: true,
      immediate: true
    },

    mainInfo: {
      handler (newVal) {
        this.$emit('input', newVal)
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.edit-other-info {
  .info-modal {
    display: flex;
    &:not(:first-child) {
      border-top: 1px solid #d9d9d9;
    }
    .left-modify-area {
      flex: 1;
      .top-description {
        display: flex;
        padding: 8px 0 0 15px;
        .desc-item {
          width: 100%;
          display: flex;
          align-items: center;
          margin-right: 12px;
          .desc-item__name {
            color: #4c4c4c;
            font-weight: 600;
            margin-right: 8px;
            flex-shrink: 0;
          }
          .desc-item__value {
            display: flex;
            align-items: center;
            flex: 1;
            ::v-deep .ant-input {
              border: none;
              padding: 0;
              box-shadow: none;
              .ant-calendar-range-picker-input {
                width: 56px;
              }
              .ant-calendar-range-picker-separator {
                line-height: 30px;
              }
            }
            ::v-deep .ant-checkbox-wrapper {
              margin-left: 14px;
              margin-right: 0;
              .ant-checkbox {
                top: -1px;
                & + span {
                  padding: 0 4px;
                  font-size: 12px;
                  position: relative;
                  top: -1px;
                }
              }
            }
          }
        }
      }
    }
    .right-setting-area {
      flex-shrink: 0;
      padding: 16px 8px;
      background: #fafafa;
      .anticon {
        display: block;
        font-size: 16px;
        cursor: pointer;
        margin-bottom: 10px;
        &:first-child {
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>
